<template>
    <div>
        <div class="login-bg-div">
            <img src="../../assets/image/login_bg.png">
        </div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder=""
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder=""
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>

    import {Form, Field, Button} from 'vant';

    export default {
        components: {
            [Form.name]: Form,
            [Field.name]: Field,
            [Button.name]: Button
        },
        data() {
            return {
                username: '',
                password: '',
            };
        },
        methods: {
            onSubmit(values) {
                const that = this;
                this.$mask.open();
                that.$http.post("/api/system/mLogin", {
                    username: values.username,
                    password: values.password
                }).then((res) => {
                    if (res.success) {
                        let result = res.result;
                        let userInfo = result.userInfo;
                        that.$store.dispatch("setUserLogin", userInfo);
                        localStorage.setItem("accessToken", result.token);
                        localStorage.setItem("userId", userInfo.id);
                        localStorage.setItem("orgId", userInfo.orgId);
                        that.$notify({type: 'success', message: '登录成功', duration: 1000,});
                        that.$router.push("/index");
                    } else {
                        that.$notify({type: 'warning', message: '登录失败: ' + res.message, duration: 2000,});
                    }
                }).catch((err) => {
                    that.$notify({type: 'warning', message: '登录失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.$mask.close();
                });
            },
        },
    };
</script>
<style scoped>
    .login-bg-div{
        width: 100%;
        height: 50%;
    }
    .login-bg-div img{
        width: 100%;
    }
</style>
